<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8" buffer="64kb"%>
<%@ include file="/pages/safeai/jsp/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人信息</title>

<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='${ctx}/js/validateFront.js'></script>
<script type='text/javascript' src='${ctx}/js/Ajax.js'></script>
<script type='text/javascript' src='${ctx}/dwr/engine.js'></script>
<script type='text/javascript' src='${ctx}/dwr/util.js'></script>
        
        <script language="JavaScript" src="${ctx}/js/jquery.js"></script>
		<script language="JavaScript" src="${ctx}/js/filter.js"></script>
		<script language="JavaScript" src="${ctx}/js/json2.js"></script>
</head>
<body>
<div class="bg">
		  <div class="bg_inside">
		<div class="head">
			<c:import url="/pages/safeai/jsp/shop/header.jsp"></c:import>
		</div>
<c:import url="/front/userinfo.do?method=myRayi"></c:import>

<form action="${ctx}/front/userinfo.do?method=updateMemberInfo" method="post" name="userInfoForm">

<div class="user_order_content">
<div  class="user_order_content_top"><img src="../images/user_order_content_top.jpg" /></div>
<div class="user_order_content_center">
<ul >
<li style=" background-image:url(../images/title_letter_icon.jpg); background-position:left center; background-repeat:no-repeat;padding:5px 0px 0px 15px;margin-bottom:5px;line-height:15px;color:#5a3e2e">个人信息</li>

<li>　收货人姓名：  <label>  <input type="text" id="realName" name="pwm.realName" value="${member.realName}"/>  </label> <font class="orange">*</font> 请填写您的真实姓名</li>
<li>　　　　性别： <label><select name="pwm.gender"/style="width:50px">
							<logic:notEqual name="member" property="gender" value="2">
								<option value="1" selected>男</option>
								<option value="2" >女</option>
						    </logic:notEqual> 
							<logic:equal name="member" property="gender" value="2">
								<option value="1" >男</option>
								<option value="2" selected>女</option>
						    </logic:equal>
						</select>
				</label>
</li>
<li>　　　　生日： 
<input type="hidden" id="tyear" value="${year}"/>
<input type="hidden" id="tmon" value="${mon}"/>
<input type="hidden" id="tday" value="${day}"/>

<label><input type="text" id="year" name="pwm.year" /style="width:100px"></label> 年 
<label>
<select name="pwm.mon" id="mon" /style="width:50px">
<option value=""><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
</label> 月  
<label><select name="pwm.day" id="day" /style="width:50px"></select></label> 日
</li>

<li>　　　　手机： <label>  <input type="text" id="mobile" name="pwm.mobile"  value="${member.mobile}"/>  </label> <font class="orange">*</font> 请填写您的手机号码，以便出货时短信通知您。</li>
<li>　　　　电话： <label>  <input type="text" id="phone" name="pwm.phone"  value="${member.phone}"/>  </label> <font class="orange">*</font> 可以添加多个号码，以“，”隔开。</li>
<li>您所在的地区： <label> 省份 <select id="provinces" name="pwm.province"></select></label>　城市 <label><select id="citys" name="pwm.rcity"></select></label>　区县 <label><select id="villages" name="pwm.town"></select></label> <font class="orange">*</font></li>
<input type="hidden" id="provinceValue" value="${member.province}" /><input type="hidden" id="cityValue" value="${member.rcity}" /><input type="hidden" id="villageValue" value="${member.town}" />
<li> 　　　　　　　 若你所在的地区不在列表中，请以<a href="mailto:vip@rayi.cn"><font class="orange">E-mail</font></a>的形式通知我们。</li>
<li>　　收货地址： <label>  <input type="text" id="address" name="pwm.address"  value="${member.address}"/>  </label> <font class="orange">*</font> 请务必详细填写该项信息，此地址将作为您的默认收货地址。</li>
<li>　　　　邮编： <label>  <input type="text" id="postCode" name="pwm.postCode"  maxlength="6" value="${member.postCode}"/>  </label></li>
<li>　　　　传真： <label>  <input type="text" name="pwm.fax" id="fax" value="${member.fax}"/>  </label> 可以添加多个号码，以“，”隔开。</li>
<li>　　　E-mail： <label>  <input type="text" id="email" name="pwm.email"  value="${member.email}"/>  </label></li>

<li>　　　　　　　 注意：带 <font class="orange">*</font> 的选项必须填写</li>
<li>　　　　　　　 ${userInfoMsg }</li>



<li style="padding-left:90px;width:300px"><a href="javascript:void(0);" class="reg_button" onclick="check()">保存修改</a>　<a href="${ctx}/front/userinfo.do?method=queryMemberInfo"  class="reg_button2 ">取消修改!</a></li>
 </ul>
 </div>
<div  class="user_order_content_bottom"><img src="../images/user_order_content_bottom.jpg" /></div>
</div>

</div>

</form>
<div style="margin-top:10px;*+margin-top:10px"><%@ include file="/user/commonProblem.jsp"%></div>
<div class="bottom">
	<%@ include file="/pages/safeai/jsp/shop/bottom.jsp"%>	
	<div class="clearAll"></div>
</div>
 
</body>
</html>

<script language="javascript"> 
    window.onload=function(){//onload start    
    //************************城市级联开始**********************************
       //省
       var provinces=document.getElementById("provinces");
       //市
       var citys=document.getElementById("citys");
       //区
       var villages=document.getElementById("villages");    
       
       getProvinces();
       getCitys();
       getVillages();
       
       provinces.onchange=function(){
           getCitys();
           getVillages();
       }
       citys.onchange=function(){
           getVillages();
       }
       villages.onchange=function(){
           getZip();
       }
       
        var v1 = window.document.getElementById("provinceValue").value;
	    var v2 = window.document.getElementById("cityValue").value;
	    var v3 = window.document.getElementById("villageValue").value;
	    
	 	if(v1 != null && v1 != "" && v2 != null && v2 != "" && v3 != null && v3 != ""){
			var provinceOptions = window.document.getElementById("provinces");
			var cityOptions = window.document.getElementById("citys");
			var villageOptions = window.document.getElementById("villages");
			
			var itemCount1 = provinceOptions.options.length; 
			
			for (var i=0;i <itemCount1;i++){ 
				if (provinceOptions.options[i].value == v1){	       
			        provinceOptions.options[i].selected = true;
			      } 
		    } 
		    
		    provinceOptions.onchange();
		    var itemCount = cityOptions.options.length;
			
		   
			for (var j=0;j <itemCount;j++){  
				if (cityOptions.options[j].value == v2){	        
			        cityOptions.options[j].selected = true;
			    } 
		    } 
		    
		    cityOptions.onchange();
		    var itemCount2 = villageOptions.options.length;
		    
			for (var z=0;z <itemCount2;z++){ 
				if (villageOptions.options[z].value == v3) {	       
			        villageOptions.options[z].selected = true;
			    } 
		    }
    	} 
    	
	   var tyear = document.getElementById("tyear").value;
       var tmon = document.getElementById("tmon").value;
       var tday = document.getElementById("tday").value;
       
       var year=document.getElementById("year");
       var beYear = 1800;
       var nowYear = new Date().getFullYear();
       
       var mon=document.getElementById("mon");
       var day=document.getElementById("day");
       
       if(tyear!=null && tmon!=null && tday!=null){
       		document.getElementById("year").value = tyear;
       		
       		var monCount = mon.options.length;
			for (var z=0;z <monCount;z++){ 
				if (mon.options[z].value == tmon) {	       
			        mon.options[z].selected = true;
			    } 
		    } 
       		
       		daychange();
       		
       		var dayCount = day.options.length;
			for (var d=0;d <dayCount;d++){ 
				if (day.options[d].value == tday) {	       
			        day.options[d].selected = true;
			    } 
		    } 
       		
       } 
       
	   year.onchange=function(){
           if(year.value.search("^-?\\d+$")!=0 || year.value < beYear || year.value > nowYear){
               year.value = "";
               year.focus();
               alert("请输入合法数字!");
           }else{
           	   if(mon.value!=""){
                   daychange();
               }
           }
       }
       
       mon.onchange=function(){
			daychange();
       } 
       
    }//onload end
    
	function daychange(){
		 var year=document.getElementById("year");
		 var mon=document.getElementById("mon");
         var day=document.getElementById("day");
         
    	 if(year.value!=null && year.value!=""){
			    var date = year.value+"/"+(mon.value*1+1)+"/0";
		       	var temp=new Date(date);
				day.options.length = 0;
				if(mon.value!=""){
					for (var j = 1; j <= temp.getDate(); j++){ 
						var id = j;
						if(id < 10){
							id = "0"+j;
						}  
						
						day.options.add(new Option(j, id));
				    }
			    }
		 }
    }
    
    function getProvinces(){
    var ajax=new Ajax();
        ajax.ajaxRequest("${ctx}/order/cityOreder.do","method=getAllProvince","get",backProvince);
    }
    
    function backProvince(str){
        var list=str.split(",");
        DWRUtil.removeAllOptions("provinces");
	    DWRUtil.addOptions("provinces", list);
    }
    
    function getCitys(){
        var ajax=new Ajax();
        var provinces=document.getElementById("provinces");
        var provinceName=provinces.options[provinces.selectedIndex].value;
        ajax.ajaxRequest("${ctx}/order/cityOreder.do","method=getCitys&provinceName="+encodeURI(provinceName),'get',backCity);
    }
    
    function backCity(str){
        var list=str.split(",");
        DWRUtil.removeAllOptions("citys");
	    DWRUtil.addOptions("citys", list);
    }
    
    function getVillages(){
    var ajax=new Ajax();
        var provinces=document.getElementById("provinces");
        var citys=document.getElementById("citys");
        var provinceName=provinces.options[provinces.selectedIndex].value;
        var cityName=citys.options[citys.selectedIndex].value;
        ajax.ajaxRequest("${ctx}/order/cityOreder.do","method=getVillages&provinceName="+encodeURI(provinceName)+"&cityName="+encodeURI(cityName),'get',backVillage);
    }
    
    function backVillage(str){
        var list=str.split(",");
        DWRUtil.removeAllOptions("villages");
	    DWRUtil.addOptions("villages", list);
    }
    function getZip(){
	    var ajax=new Ajax();
        var provinces=document.getElementById("provinces");
        var citys=document.getElementById("citys");
        var villages=document.getElementById("villages");
        
        var provinceName=provinces.options[provinces.selectedIndex].value;
        var cityName=citys.options[citys.selectedIndex].value;
        var villagesName=villages.options[villages.selectedIndex].value;
        
        ajax.ajaxRequest("${ctx}/order/cityOreder.do","method=getZip&provinceName="+encodeURI(provinceName)+"&cityName="+encodeURI(cityName)+"&villageName="+encodeURI(villagesName),'get',backZip);
    }
    function backZip(str){
       document.getElementById("postCode").value = str;
    }
    
    //************************城市级联结束**********************************

	function check(){  
		var form = document.getElementsByTagName("form")[1];
		
		var realName = document.getElementById("realName").value;
		var mobile = document.getElementById("mobile").value;
		var phone = document.getElementById("phone").value;
		var address = document.getElementById("address").value;
		var postCode = document.getElementById("postCode").value;
		var email = document.getElementById("email").value;
		var fax = document.getElementById("fax").value;
		//	邮箱验证
		if(email!=null && email!=""){
			var pattern =/^[a-zA-Z0-9_\-.]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{1,}$/;
			if(!pattern.exec(email)){
				alert("请输入正确的邮箱地址!");
				return false;
			}
			if(email.length>60){
				alert("邮箱的最大长度为60个字符!");
				return false;
			}
		}			
		//	邮编验证
		if(postCode!=null && postCode!=""){
			if(postCode.search("^-?\\d+$")!=0){
				alert("输入的邮编格式错误");
				document.getElementById("postCode").focus();
				return;
			}  
			if(postCode.length!=6){
				document.getElementById("postCode").focus();
				alert("输入的邮编位数不正确!");
				return;
			}
		}
		//	姓名验证
		if(realName == null || realName == ""){
			document.getElementById("realName").focus();
			alert("请输入您的真实姓名!");
			return false;
		}else{
			var pattern=/([!\@\#\$%^&*()+|\\{}:;?<>`])+/; 
				if((pattern.test(realName))) { 
				alert("真实姓名不能包含特殊字符!"); 
				return false; 
			} 
			if(realName.length>40){
				alert("收货人姓名长度不可超过40个字符!");
				return false;
			}
		}
		//	手机号验证
		if(mobile == null || mobile == ""){
			document.getElementById("mobile").focus();
			alert("请输入您的手机号码!");
			return false;
		}else{
			if(mobile.length!=11){
				alert("手机号码长度不对！");
				return false;
			}
		}
		//	电话号码验证
		var strphone;
		if(phone.indexOf("，")==-1){
			strphone=phone.split(",");
		}else{
			strphone=phone.split("，");
		}
		for(i=0;i<strphone.length;i++){
			if(strphone[i].search(/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/) == -1){
				alert("输入的电话格式错误");
				document.getElementById("phone").focus();
				return;
			}
		}	
		//	地址验证	
		if(address == null || address == ""){
			document.getElementById("address").focus();
			alert("请输入您的送货地址!");
			return;
		} else{
			var pattern=/([!\@\#\$%^&*()+|\\{}:;?<>`])+/; 
				if((pattern.test(address))) { 
				alert("收货人地址不能包含特殊字符!"); 
				return false; 
			} 
			if(address.length>255){
				alert("收货地址的长度不能超过255个字符!");
				return false;
			}
		}
		//	传真验证
		if(fax== null || fax == ""){
		}else{
			if(fax.length>62){
				alert("传真最大长度不可超过62个字符!");
				return false;
			}
			var strfax=fax.split(",");
			var i; 
			for(i=0;i<strfax.length;i++){
				if(isNaN(strfax[i])){
					alert("传真号码只能是数字！");
					return false;
				}
			}
			
		}
		//	省市区验证
		var provinces = document.getElementById("provinces").value;
		if(provinces=="请选择"){
			alert("省份必须选择!");
			return false;
		}
		var citys = document.getElementById("citys").value;
		if(citys=="请选择"){
			alert("省份必须选择!");
			return false;
		}
		var villages = document.getElementById("villages").value;
		if(villages=="请选择"){
			alert("省份必须选择!");
			return false;
		}
		form.submit();
	} 
</script>
  